<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04-mouseenter和mouseover的区别</title>
    <style>
        .father{
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
            margin: 100px auto;
        }

        .son{
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="father">father
        <div class="son">son</div>
    </div>
    <script>
        /* 
            mouseover   冒泡   鼠标经过
            mouseenter  不冒泡  鼠标经过

            这两个都是鼠标经过触发的事件
            差别是：mouseover 经过自身盒子会触发，经过子盒子还会触发
                   mouseenter 只会经过自身盒子触发
            之所以这样，是因为mouseenter不会冒泡 同样mouseleave 也不会冒泡
        */
       var father = document.querySelector('.father');
       var son = document.querySelector('.son');

    //    father.addEventListener('mouseenter', function(){
    //        console.log('----father 触发了---mouseenter---');
    //    });
       father.addEventListener('mouseover',function(){
           console.log('---father 触发了---mouseover');
       });
    </script>
    
</body>
</html>